<template>
  <div data-flex="cross:center" class="nav p-h-16 bs-2 m-b-10 bg-white">
    <span class="f-16" data-flex-box="1">
      <component :is="titleComponent"></component>
    </span>
    <div data-flex="cross:center">
      <os-icon name="user" size="18" class="m-r-5" v-if="!userIconComponent"/>
      <component v-else :is="userIconComponent"></component>
      <span>{{userInfo.navUserName}}</span>
      <span class="m-h-5">|</span>
      <span>{{userInfo.navRoleName}}</span>
      <span class="f-16">
        <component v-if="!!navComponent" :is="navComponent"></component>
      </span>
      <os-icon name="logout" size="18" class="m-l-10 cp" @click="onLogout"/>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  components: {},
  computed: {
    ...mapState(['userInfo']),
    titleComponent () {
      return 'os-title'
    },
    navComponent () {
      return this.$config?.components?.nav ? 'os-nav' : ''
    },
    userIconComponent () {
      return this.$config?.components?.userIcon
    }
  },
  methods: {
    async onLogout () {
      const re = await this.$utils.confirm('确定退出登录吗？')
      if (!re) return
      let data = {}
      if (this.$config.actions.logout !== null) {
        this.$utils.loading.open()
        data = await this.$store.dispatch(this.$config.actions.logout || 'logout')
        this.$utils.loading.close()
      }
      if (!data.error) {
        if (this.$config.onLogout) {
          this.$config.onLogout({ store: this.$store, router: this.$router })
        } else {
          this.$router.push('/login')
          this.$utils.message.success('退出成功')
        }
        this.$store.commit('logout')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .nav{
    height: 52px !important;
  }
</style>
